//detailListFilter
import React, {PropTypes} from 'react'
import {Pagination} from 'antd'
import styles from './cms.less'

class BlockListPage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const self = this;
    let {itemInfo, baseUrl, keyField, pageParam, dataSource} = self.props;
    itemInfo = itemInfo || [
        {
          left: {
            dataIndex: 'projectName',
            render: null
          },
          right: {
            dataIndex: 'statusText',
            render: null
          }
        },
        {
          left: {
            dataIndex: 'type',
            render: null
          },
          right: {
            dataIndex: 'createdOn',
            render: null
          }
        }
      ]
    baseUrl = baseUrl || '#/detailExample/'
    keyField = keyField || 'id'
    dataSource.datas = dataSource.datas || [
        {
          "id": 1,
          "projectId": 1,
          "projectName": "项目名称1",
          "status": 1,
          "type": '临时会议',
          "statusText": "进行中",
          "createdOn": "2017-02-28"
        },
        {
          "id": 2,
          "projectId": 1,
          "projectName": "项目名称1",
          "status": 1,
          "type": '年终会议',
          "statusText": "进行中",
          "createdOn": "2017-02-27"
        }
      ]

    const createListItem = (item, index) => {
      return <div className={styles.listItem + ' ' + ((index % 2 ) == 0 ? styles.left : styles.right)} key={index}>
        {
          itemInfo.map((x, key) => {
            return <p key={key}>
              <b style={x.left.dataStyle || null}>
                {
                  key == 0 ?
                    <a href={ baseUrl !== undefined ? baseUrl + item[keyField] : 'javascript:void(0)'}>
                      {
                        x.left.render ? x.left.render(item[x.left.dataIndex]) : item[x.left.dataIndex]
                      }
                    </a>
                    :
                    x.left.render ? x.left.render(item[x.left.dataIndex]) : item[x.left.dataIndex]
                }
              </b>
              {x.right.dataIndex ?
                <b>
                  {
                    x.right.render ? x.right.render(item[x.right.dataIndex]) : <span>{item[x.right.dataIndex]}</span>
                  }
                </b>
                : ''}
            </p>
          })
        }
      </div>
    };

    const pagination = {
      total: dataSource.total,
      pageSize: pageParam.pageSize,
      pageSizeOptions: ['1', '10', '20', '30', '40'],
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      showQuickJumper: true,
      onShowSizeChange: pageParam.onShowSizeChange,
      onChange: pageParam.onChange,
      size: "small"
    };
    if (pageParam.current) {
      pagination.current = pageParam.current;
    }

    return <div>
      <div className={styles.blockList} style={{marginTop: '0px'}}>
        { dataSource.datas.length == 0 ?
          <div className={styles.corNoData}>
            <span>
              <i className="anticon anticon-frown-o"></i>暂无数据
            </span>
          </div> :
          dataSource.datas.map((item, key) => {
            return createListItem(item, key)
          })
        }
      </div>
      {
        (dataSource.datas && dataSource.datas.length > 0) ?
          <Pagination {...pagination} style={{
            'float': 'none',
            'display': 'table',
            'margin': '0px auto',
            'paddingTop': '20px'
          }}/>
          : ''
      }
    </div>
  }
}

BlockListPage.propTypes = {
  itemInfo: PropTypes.arrayOf(PropTypes.shape({
    left: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
    right: PropTypes.shape({
      dataIndex: PropTypes.string.isRequired,
      render: PropTypes.func
    }),
  })).isRequired,
  // list: PropTypes.array.isRequired,
  dataSource: PropTypes.object,
  baseUrl: PropTypes.string,
  keyField: PropTypes.string,
};
export default BlockListPage

